<template >
  <div id='app'>
    <router-view>
    </router-view>
    <transition name='el-fade-in'>
      <div class='loading' v-if="!roles">
        <!-- <div class='roataqx-loader'>
          <div class='one'></div>
          <div class='two'></div>
          <div class='three'></div>
        </div> -->
        <img src="../public/loding.gif" alt="" width="150px">
        <div class='text'>
          {{errorText}}
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
//  import VBar from 'v-bar'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
    }
  },
  components: {
    // VBar
  },
  computed: {
    ...mapGetters([
      'roles',
      'errorText'
    ]),
  },
  watch: {
    roles(n, o) {
      // alert(1)
    },
    custId(n, o) {
      // alert(2)
    }
  }
}
</script>
<style lang="scss">
.loading {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 10000;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0);
  .text {
    color: #000000;
    margin-top: 50px;
    font-weight: 500;
    font-size: 24px;
  }
  img {
  }
  .roataqx-loader {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    perspective: 800px;
    position: relative;
  }

  .roataqx-loader > div {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .roataqx-loader .one {
    left: 0%;
    top: 0%;
    animation: rotate-one 1s linear infinite;
    border-bottom: 6px solid #ff0000;
  }

  .roataqx-loader .two {
    right: 0%;
    top: 0%;
    animation: rotate-two 1s linear infinite;
    border-right: 6px solid #00ff00;
  }

  .roataqx-loader .three {
    right: 0%;
    bottom: 0%;
    animation: rotate-three 1s linear infinite;
    border-top: 6px solid #0000ff;
  }

  @keyframes rotate-one {
    0% {
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
  }

  @keyframes rotate-two {
    0% {
      transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
  }

  @keyframes rotate-three {
    0% {
      transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
  }
  /* ========== () ========== */
  /* ========== () ========== */
  /* ========== () ========== */
  /* ========== () ========== */
  /* ========== () ========== */
  /* ========== () ========== */
  /* ========== () ========== */
  /* ========== () ========== */
  /* ========== () ========== */
  /* ========== () ========== */
}
</style>
